import React, { PureComponent } from 'react'
import { Card, Button } from 'antd'
import { connect } from 'dva'
import autobind from 'autobind-decorator'

import styles from './index.scss'

const { Meta } = Card

@connect((state) => {
  return {
    photoList: state.photos.list,
    loading: state.loading.effects['photos/getPhotos']
  }
})
@autobind
export default class Photos extends PureComponent {
  componentDidMount () {
    // this.load()
  }

  load () {
    this.props.dispatch({ type: 'photos/getPhotos' })
  }

  render () {
    console.log(this.props)

    return (
      <div>
        <h1>photos</h1>
        <div className={styles['card-container']}>
          {this.props.photoList.map(photo => {
            return (
              <Card
                key={photo.id}
                hoverable
                style={{ width: 240 }}
                cover={
                  <img alt="example" className={styles.img} src={photo.url} />
                }
              >
                <Meta
                  style={{ textAlign: 'center' }}
                  title={photo.title}
                  description="www.instagram.com"
                />
              </Card>
            )
          })}
        </div>
        <div className={styles.load}>
          <Button onClick={this.load} loading={this.props.loading}>load more</Button>
        </div>
      </div>
    )
  }
}
